import 'package:flutter/material.dart';
import 'package:flutter_mobx/flutter_mobx.dart';
import 'package:macnov/common/credit_card.dart';
import 'package:macnov/common/loading.dart';
import 'package:macnov/common/virtual_card.dart';
import 'package:macnov/stores/wallet.dart';

class VirtualCardScene extends StatefulWidget {
  @override
  _VirtualCardSceneState createState() => _VirtualCardSceneState();
}

class _VirtualCardSceneState extends State<VirtualCardScene> {
  @override
  void initState() {
    super.initState();
    this._loadVCards();
  }

  Widget _renderCard(CreditCardViewModel vcard, index) {
    return VirtualCard(data: vcard);
  }

  List<Widget> _renderVCardList(List cards) {
    return cards
        .asMap()
        .keys
        .map((index) => Positioned(
              height: 220,
              top: 150.0 * index,
              left: 0,
              right: 0,
              child: _renderCard(cards[index], index),
            ))
        .toList();
  }

  List<Widget> _renderPage() {
    var cards = walletStore.vcards;
    if (cards.length == 0) return [Loading()];
    return <Widget>[..._renderVCardList(cards)];
  }

  @override
  Widget build(BuildContext context) {
    return Observer(
      builder: (_) => SingleChildScrollView(
        child: Padding(
          padding: EdgeInsets.only(left: 10, right: 10),
          child: Stack(
            children: [Container(height: 420+140.0 * walletStore.vcards.length), ..._renderPage()],
          ),
        ),
      ),
    );
  }

  void _loadVCards() {
    walletStore.loadVCards();
  }
}
